<template>
  <view class="content">
	 <view class="vm-workbench">
		 <view class="vm-workbench-bell" @click="bellCli">
			 <view class="vm-workbench-bell-rig">
				 <uni-icons type="notification" size="25"></uni-icons>
				 <uni-badge :text="msgCount" size="small"></uni-badge>
			 </view>
		 </view>
		  <image class="vm-workbench-profile" src="/static/images/profile.jpg" mode="widthFix"></image>
		  <view class="vm-workbench-text">
			  <view class="vm-workbench-text-name">
				  <text class="vm-workbench-text-name-lef">{{$store.state.user.info.userName}}</text>
				  <view class="vm-workbench-text-name-rig">{{$store.state.user.roles[0].roleName}}</view>
			  </view>
			  <view class="vm-workbench-text-dep">{{$store.state.user.info.dept.deptName}}：{{$store.state.user.info.phonenumber}}</view>
		  </view>
	  </view>
	  <view class="vm-chunk vm-chunk-1">
		  <view class="vm-chunk-1-bulk vm-chunk-1-bulk1" @click="menuCli">设备管理</view>
		  <view class="vm-chunk-1-bulk vm-chunk-1-bulk2">设备保养</view>
		  <view class="vm-chunk-1-bulk vm-chunk-1-bulk3">设备巡检</view>
		  <view class="vm-chunk-1-bulk vm-chunk-1-bulk4">故障报修</view>
	  </view>
	   <view class="vm-chunk vm-chunk-2">
		   <view class="vm-chunk-2-text">巡检任务</view>
		   <view class="vm-chunk-2-content">
			   <view class="vm-chunk-2-content-bulk">
				   <view class="vm-chunk-2-content-bulk-num">160</view>
				   <view class="vm-chunk-2-content-bulk-name">巡检设备</view>
			   </view>
			   <view class="vm-chunk-2-content-int"></view>
			   <view class="vm-chunk-2-content-wir"></view>
			   <view class="vm-chunk-2-content-int"></view>
			   <view class="vm-chunk-2-content-bulk">
				   <view class="vm-chunk-2-content-bulk-num">120</view>
				   <view class="vm-chunk-2-content-bulk-text vm-chunk-2-content-bulk-text1">已巡检</view>
			   </view>
			   <view class="vm-chunk-2-content-bulk">
				   <view class="vm-chunk-2-content-bulk-num">40</view>
				   <view class="vm-chunk-2-content-bulk-text vm-chunk-2-content-bulk-text2">未巡检</view>
			   </view>
		   </view>
		</view>
		<view class="vm-chunk vm-chunk-2">
		   <view class="vm-chunk-2-text">保养任务</view>
		   <view class="vm-chunk-2-content">
			   <view class="vm-chunk-2-content-bulk">
				   <view class="vm-chunk-2-content-bulk-num">183</view>
				   <view class="vm-chunk-2-content-bulk-name">保养设备</view>
			   </view>
			   <view class="vm-chunk-2-content-int"></view>
			   <view class="vm-chunk-2-content-wir"></view>
			   <view class="vm-chunk-2-content-int"></view>
			   <view class="vm-chunk-2-content-bulk">
				   <view class="vm-chunk-2-content-bulk-num">180</view>
				   <view class="vm-chunk-2-content-bulk-text vm-chunk-2-content-bulk-text1">已保养</view>
			   </view>
			   <view class="vm-chunk-2-content-bulk">
				   <view class="vm-chunk-2-content-bulk-num">3</view>
				   <view class="vm-chunk-2-content-bulk-text vm-chunk-2-content-bulk-text2">未保养</view>
			   </view>
		   </view>
		</view>
		<view class="vm-chunk vm-chunk-2">
		   <view class="vm-chunk-2-text">报修任务</view>
		   <view class="vm-chunk-2-dis">
			   <view class="vm-chunk-2-content vm-chunk-2-content2">
				   <view class="vm-chunk-2-content-bulk vm-chunk-2-content2-bulk">
					   <view class="vm-chunk-2-content-bulk-num">180</view>
					   <view class="vm-chunk-2-content-bulk-text vm-chunk-2-content-bulk-text1">待检收</view>
				   </view>
				   <view class="vm-chunk-2-content-wir"></view>
				   <view class="vm-chunk-2-content-bulk vm-chunk-2-content2-bulk">
					   <view class="vm-chunk-2-content-bulk-num">3</view>
					   <view class="vm-chunk-2-content-bulk-text vm-chunk-2-content-bulk-text2">待维修</view>
				   </view>
			   </view>
			   <view class="vm-chunk-2-repairs">我要报修</view>
		   </view>
		</view>
		<view class="vm-chunk vm-chunk-2 vm-chunk-3">我要打卡</view>
  </view>
</template>

<script>
	import {unreadcount} from '../api/message/message.js'
  export default {
	  data(){
		 return{
			 msgCount:0
		 } 
	  },
    onLoad: function() {
		console.log(this.$store.state.user)
    },
	onShow() {
		this.messageApa()
	},
	 methods: {
		 messageApa(){
			 unreadcount().then(res=>{
				 if(res.code===200){
					 this.msgCount=res.data.msgCount
				 }
			 })
		 },
		 menuCli() {
		   this.$tab.navigateTo('/pages/business/equipmentManagement/index')
		 },
		 bellCli(){
			this.$tab.navigateTo('/pages/business/messageList/index')
		 }
	 }
  }
</script>
<style lang="scss">
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	.vm-workbench{
		width: 100%;
		// height:420rpx;
		height: 320rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #fff url(../static/images/workbench-01.png) no-repeat;
		background-size: 100% 100%;
		display: flex;
		align-items: center;
		position: relative;
		&-bell{
			width: 50rpx;
			height: 50rpx;
			border-radius: 100rpx;
			position: absolute;
			top: 30rpx;
			left: 30rpx;
			&-rig{
				width: 100%;
				height: 100%;
				position: relative;
				/deep/ .uni-badge{
					position: absolute;
					top: -56rpx;
					right: -24rpx;
				}
			}
		}
		&-profile{
			width: 130rpx;
			height: 130rpx;
			border-radius: 100px;
			border: 1px solid #fff;
		}
		&-text{
			margin-left: 30rpx;
			&-name{
				display: flex;
				align-items: center;
				&-lef{
					font-size: 36rpx;
					color: #000;
					font-weight: bold;
				}
				&-rig{
					margin-left: 10rpx;
					height: 30rpx;
					background: transparent url(../static/images/workbench-02.png) 0 100% no-repeat;
					background-size: 30rpx 30rpx;
					padding:0 10rpx 0 40rpx;
					box-sizing: border-box;
					border-radius: 8rpx;
					font-size: 20rpx;
					line-height: 30rpx;
					color: #3f73ad;
				}
			}
			&-dep{
				color: #8a9192;
				font-size: 22rpx;
				line-height: 50rpx;
			}
		}
	}
	.vm-chunk{
		width: 95%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 18rpx;
		position: relative;
		top: -30rpx;
		margin-bottom: 20rpx;
	}
	.vm-chunk-1{
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		&-bulk1{
			background: #fff url(../static/images/bulk-01.png) no-repeat;
		}
		&-bulk2{
			background: #fff url(../static/images/bulk-02.png) no-repeat;
		}
		&-bulk3{
			background: #fff url(../static/images/bulk-03.png) no-repeat;
		}
		&-bulk4{
			background: #fff url(../static/images/bulk-04.png) no-repeat;
		}
		&-bulk{
			width: 25%;
			height: 150rpx;
			display: flex;
			align-items: flex-end;
			justify-content: center;
			background-size: 100rpx 100rpx;
			background-position: center top;
			font-size: 22rpx;
		}
		
	}
	.vm-chunk-2{
		&-text{
			margin-bottom: 10rpx;
			font-weight: bold;
			line-height: 50rpx;
			color: #474747;
		}
		&-dis{
			display: flex;
			justify-content: space-between;
		}
		&-content{
			width: 100%;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #f9f9f9;
			border-radius: 18rpx;
			display: flex;
			justify-content: space-between;
			&-bulk{
				width: 30%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				&-num{
					font-size: 40rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 6rpx;
				}
				&-name{
					color: #7c7c7c;
				}
				&-text{
					padding: 2rpx 14rpx;
					box-sizing: border-box;
					border: 1px solid #dbdbdb;
					border-radius: 4rpx;
					font-size: 22rpx;
					border-radius: 4rpx;
				}
				&-text2{
					color: #333;
				}
				&-text2{
					color: #ff6b01;
				}
			}
			&-int{
				width: 5%;
			}
			&-wir{
				border-right: 1px solid #e0e0e0;
			}
		}
		&-content2{
			width: 60%;
			&-bulk{
				width: 50%;
			}
		}
		&-repairs{
			width: 35%;
			height: auto;
			border-radius: 18rpx;
			background: #fff url(../static/images/workbench-03.png) no-repeat;
			background-size: 100% 100%;
			padding: 20rpx;
			box-sizing: border-box;
			color:#0169ea;
			font-weight: bold;
		}
	}
	.vm-chunk-3{
		color:#016aed;
		padding-left:100rpx;
		box-sizing: border-box;
		font-size: 36rpx;
		line-height: 60rpx;
		font-weight: bold;
		font-style: italic;
		background-image: url(../static/images/workbench-04.png), url(../static/images/workbench-05.png), url(../static/images/workbench-06.png);
		background-repeat: no-repeat,no-repeat,no-repeat;
		background-size: 80rpx 80rpx,36% 100%,48rpx 48rpx;
		background-position: 10rpx 14rpx,0 0,96% 60%;
	}
  }
</style>
